<script setup lang="ts">
import { ref } from 'vue';
import {
  NIcon,
  NButton,
  NSelect,
  NEl,
  useDialog,
  NTooltip
} from 'naive-ui'
import {
  CloseOutline as CloseIcon,
  RemoveOutline as MiniIcon,
  AddOutline as AddIcon
} from '@vicons/ionicons5'
import AddView from './add.vue'
import GameBiddings from './views/bindings.vue'
import DashBoardConfig from './views/dbc.vue'
import { computed } from '@vue/reactivity';

const dialog = useDialog()
const ipcRenderer = eval('require("electron").ipcRenderer')
const showNew = ref(false)
const currentGame = computed(() => {
  return (games.value.find(v => v.name === current.value) || {}) as {
    name: string,
    type: 'TCP' | 'UDP',
    port: number,
    datas: {
      offset: number,
      name: string,
      type: any,
      rindex: number,
      rtype: any,
      fn: string
    }[]
  }
})
const current = ref('')
const games = ref([
  {
    name: '极限竞速 地平线5',
    url: '/dash/fh5',
    port: 5566,
    type: 'UDP',
    status: 0,
    datas: [
      {
        offset: 0,
        name: '游戏状态',
        type: 'uint8',
        rindex: 0,
        rtype: 'int32',
        fn: ''
      }
    ]
  },
  {
    name: '尘埃拉力 2.0',
    url: '/dash/dr2',
    port: 10001,
    type: 'UDP',
    status: 0,
    datas: [
      {
        offset: 0,
        name: '游戏状态',
        type: 'uint8',
        rindex: 0,
        rtype: 'int32',
        fn: ''
      },
      {
        offset: 1,
        name: '车辆类型',
        type: 'uint8',
        rindex: 0,
        rtype: 'int32',
        fn: ''
      },
      {
        offset: 2,
        name: '挡位',
        type: 'int8',
        rindex: 0,
        rtype: 'int32',
        fn: ''
      },
      {
        offset: 3,
        name: '最大挡位',
        type: 'uint8',
        rindex: 0,
        rtype: 'int32',
        fn: ''
      },
      {
        offset: 4,
        name: '方向盘位置',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 8,
        name: '油门位置',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 12,
        name: '制动位置',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 16,
        name: '离合位置',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 20,
        name: '当前时速',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 24,
        name: '引擎空转速度',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 28,
        name: '引擎转速',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 32,
        name: '最大引擎转速',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 36,
        name: '侧向G力',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 40,
        name: '前后G力',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 44,
        name: '侧向角度',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 48,
        name: '前后角度',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 52,
        name: '前左减震变形比例',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 56,
        name: '前右减震变形比例',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 60,
        name: '后左减震变形比例',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 64,
        name: '后右减震变形比例',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 68,
        name: '前左减震变形量',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 72,
        name: '前右减震变形量',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 76,
        name: '后左减震变形量',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      },
      {
        offset: 80,
        name: '后右减震变形量',
        type: 'float32',
        rindex: 0,
        rtype: 'float32',
        fn: ''
      }
    ]
  }
])

;(async () => {
  const res = await ipcRenderer.invoke('fetch-all')
  games.value = res
  current.value = games.value[0]?.name
})()

async function onAdd(name: string) {
  const res = await ipcRenderer.invoke('add', name)
  if (res) {
    games.value = res
    showNew.value = false
    current.value = name
  }
}

async function onRemove() {
  if (!currentGame) {
    return
  }
  dialog.warning({
    title: '警告',
    content: `是否删除 ${currentGame.value.name} ?`,
    positiveText: '确定',
    negativeText: '取消',
    async onPositiveClick() {
      const res = await ipcRenderer.invoke('remove', currentGame.value.name)
      if (res) {
        const index = games.value.findIndex(v => v.name === currentGame.value.name)
        games.value.splice(index, 1)
        current.value = games.value[0]?.name
      }
    }
  })
}

function onMini() {
  ipcRenderer.invoke('mini')
}

</script>

<template>
  <n-el class="home">
    <div class="header">
      <n-select :options="games" label-field="name" value-field="name" v-model:value="current" :disabled="games.length < 1"></n-select>
      <n-button text type="success" @click="showNew = true" style="margin-right: auto">
        <n-icon :size="22">
          <add-icon />
        </n-icon>
      </n-button>
      <n-button text @click="onMini">
        <n-icon :size="28">
          <mini-icon />
        </n-icon>
      </n-button>
    </div>
    <!-- <div class="game-list" @click="currentGame = (null as any)">
      <n-scrollbar class="list">
        <n-el class="game" v-for="(game, i) of games" :key="i" :class="game === currentGame ? 'active' : ''"
          @click.stop="currentGame = game">
          <span>{{ game.name }}</span>
        </n-el>
      </n-scrollbar>
    </div>
    <div class="settings">
      <div class="app-header">
      </div>
      <n-form ref="formRef" v-if="currentGame" label-placement="left" :model="currentGame.options" :rules="rules">
        <n-form-item path="width" label="宽度">
          <n-input-number v-model:value="currentGame.options.width" :show-button="false" />
        </n-form-item>
        <n-form-item path="height" label="高度">
          <n-input-number v-model:value="currentGame.options.height" :show-button="false" />
        </n-form-item>
        <n-form-item path="port" label="端口">
          <n-input-number v-model:value="currentGame.options.port" :show-button="false" />
        </n-form-item>
      </n-form>
      <div class="actions" v-if="currentGame">
        <n-button tertiary type="primary" @click="onStart">启动</n-button>
        <n-button tertiary type="warning" @click="onStop">关闭</n-button>
      </div>
    </div> -->
    <AddView v-model:value="showNew" @ok="onAdd" />
    <div class="content">
      <GameBiddings :options="currentGame" @remove="onRemove" />
      <DashBoardConfig :game="currentGame?.name || ''" />
    </div>
  </n-el>
</template>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  background: rgba(16, 16, 20, 0.98);

  .header {
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px;
    -webkit-app-region: drag;
    background-color: var(--modal-color);
    box-shadow: 0 0 1px 1px var(--border-color);
    z-index: 1000000;

    button {
      margin-left: 5px;
      -webkit-app-region: none;
    }

    &:deep(.n-select) {
      width: 180px;
      -webkit-app-region: none;
    }
  }

  .content {
    width: 100%;
    height: calc(100% - 54px);
    overflow: hidden;
    display: flex;
  }

  .game-list {
    width: 200px;
    height: calc(100vh - 24px);

    .title {
      height: 25px;
      line-height: 25px;
      opacity: 0.85;
      margin-left: 5px;
    }

    .list {
      height: calc(100% - 10px);
      background-color: rgb(16, 16, 20);
      -webkit-app-region: none !important;
      padding: 5px 0;

      .game {
        cursor: pointer;
        padding: 0 8px;

        &.active {
          color: var(--primary-color)
        }
      }
    }
  }

  .n-divider {
    margin: 0 12px !important;
    height: calc(100vh - 24px);
  }

  .settings {
    width: calc(100% - 200px);
    height: calc(100vh - 24px);
    margin-left: 12px;

    .n-input {
      -webkit-app-region: none !important;
    }

    button {
      -webkit-app-region: none !important;
    }

    .app-header {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      height: 44px;

      button {
        margin-left: 5px;
      }
    }

    .actions {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
